<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
	<Echart id="rightTop" :options="option" class="right_top_inner" v-if="pageflag" ref="charts" />
	<Reacquire v-else @onclick="getData" style="line-height: 200px">
		重新获取
	</Reacquire>
</template>

<script>
	import {
		currentGET
	} from "api/modules";
	import {
		graphic
	} from "echarts"
	export default {
		data() {
			return {
				option: {},
				pageflag: false,
			};
		},
		created() {

		},

		mounted() {
			this.getData();
		},
		beforeDestroy() {
			this.clearData();
		},
		methods: {
			clearData() {},
			getData() {
				currentGET("resultRate").then((res) => {
					if (res.flag) {
						this.pageflag = true;
						this.init(res.data.category, res.data.transRate, res.data.transNum, res.data.resultNum);
					} else {
						this.pageflag = false;
						this.$Message({
							text: res.msg,
							type: "warning",
						});
					}
				});
			},
			init(year, transRate, transNum, resultNum) {
				this.option = {
					xAxis: {
						type: "category",
						data: year,
						boundaryGap: false, // 不留白，从原点开始
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(31,99,163,.2)",
							},
						},
						axisLine: {
							// show:false,
							lineStyle: {
								color: "rgba(31,99,163,.1)",
							},
						},
						axisLabel: {
							color: "#7EB7FD",
							fontWeight: "500",
						},
					},
					yAxis: {
						type: "value",
						name: '转化率(%)',
						nameTextStyle: {
							color: "#7EB7FD",
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(31,99,163,.2)",
							},
						},
						axisLine: {
							lineStyle: {
								color: "rgba(31,99,163,.1)",
							},
						},
						axisLabel: {
							color: "#7EB7FD",
							fontWeight: "500",
							formatter: '{value} %'
						},
					},
					tooltip: {
						trigger: "axis",
						backgroundColor: "rgba(0,0,0,.6)",
						borderColor: "rgba(147, 235, 248, .8)",
						textStyle: {
							color: "#FFF",
						},
						// formatter: '{b}年: <br />成果数&nbsp;&nbsp;&nbsp;&nbsp;' + resultNum +
						// 	'个<br />转化数&nbsp;&nbsp;&nbsp;&nbsp;' + transNum + 
						// 	'个<br />转化率&nbsp;&nbsp;&nbsp;&nbsp;{c}%'
						formatter: function(data) {
							let result = '';
							let content = '';
							data.map((item, index) => {
								if (item.data.empty) {
									result = ''
								} else {
									content +=
										`&nbsp;&nbsp;&nbsp;&nbsp;<span style='font-size:12px; float:right'>成果数&nbsp;&nbsp;&nbsp;&nbsp;${resultNum[index]}个 <br />转化数&nbsp;&nbsp;&nbsp;&nbsp;${transNum[index]}个 <br />转化数&nbsp;&nbsp;&nbsp;&nbsp;${transRate[index]}% </span><br/>`
									result =
										`<span style='font-size: 14px;'>${item.name}年</span> <br/> ${content}`;
								}
							})
							return result;
						}

					},
					grid: {
						//布局
						show: true,
						left: "10px",
						right: "30px",
						bottom: "10px",
						top: "50px",
						containLabel: true,
						borderColor: "#1F63A3",
					},
					series: {
						name: '年份',
						type: 'line',
						data: transRate,
						markPoint: {
							data: [{
									type: 'max',
									name: 'Max'
								},
								{
									type: 'min',
									name: 'Min'
								}
							]
						},
						markLine: {
							data: [{
								type: 'average',
								name: '平均数'
							}],
							label: {
								color: '#fff'
							}
						}
					}
				};
			},
		},
	};
</script>
<style lang='scss' scoped>
	.right_top_inner {
		margin-top: -8px;
	}
</style>